<template>
    <div class="readingArticles">
        <el-button type="text" style="float:left" @click="back()">返回</el-button>
        <h3>{{articleMes.title}}</h3>
        <div class="authorBox">
            <div class="author" v-if="articleMes.username">
                <span>发布者：{{articleMes.username}}</span>
            </div>
            <ul class="classification clearFix">
                <!-- <li>
                    <span>分类：{{articleTypeConvert(articleMes.classify)}}</span>
                </li> -->
                
                <li>
                    <span>发布时间：{{articleMes.createTime || articleMes.creationtime}}</span>
                </li>
                <li>
                    <span>阅读（{{articleMes.viewnum || articleMes.readnum}}）</span>
                </li>
                <li>
                    <span>评论（{{commentTotal}}）</span>
                </li>
                <li>
                    <!-- <el-dropdown trigger="click">
                        <span class="el-dropdown-link">
                            字体大小
                            <i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>12px</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown> -->
                </li>
            </ul>
            <!-- <div class="power">
                <span>阅读权限：{{articleMes.jurisdictionname}}</span>
            </div> -->
            <el-divider content-position="left" v-if="$route.query.junmpType == 3">活动图片</el-divider>
            <div v-if="$route.query.junmpType == 3">
                <div class="lineBanner">
                    <swiper :options="swiperOptionMultiple" v-if="imgList.length>0" ref="mySwiper">
                        <swiper-slide v-for="(item, index) in imgList" :key="index">
                            <div class="campusList">
                                <img :src="item | pictureUrl" style="width: 100%;height:250px" />
                                <!-- <p>{{item.detail}}</p>
                                <label>{{item.peopleCount}}</label> -->
                            </div>
                        </swiper-slide>
                        <div class="swiper-button-prev" slot="button-prev"></div>
                        <div class="swiper-button-next" slot="button-next"></div>
                    </swiper>
                </div>
            </div>
            <el-divider content-position="left">内容</el-divider>
            <div class="content" id="content">
                <div v-html="articleMes.content"></div>
                <!-- {{articleMes.content.slice(1,-1)}} -->
            </div>
            <el-divider content-position="left" v-if="$route.query.junmpType == 3">研讨</el-divider>
                <div v-if="$route.query.junmpType == 3">
                    <video :src="articleMes.video | pictureUrl" controls autoplay class="video" 
                        width="100%" height="400"></video>
                </div>
            <el-divider content-position="left" v-if="$route.query.junmpType == 3">反思</el-divider>
            <div class="content" id="content" v-if="$route.query.junmpType == 3">
                <div v-html="articleMes.teachReflect"></div>
                <!-- {{articleMes.content.slice(1,-1)}} -->
            </div>
            <el-divider content-position="left"></el-divider>
            <div class="upAndDown clearFix">
                <div class="btn">
                    <lastAndNextArticle :data="articleMes" @articleFriendContent="articleFriendContent"></lastAndNextArticle>
                    <!-- <el-button type="text" @click="upArticle">上一篇：应用解题式</el-button>
                    <el-divider direction="vertical"></el-divider>
                    <el-button type="text" @click="nextArticle">下一篇：《公共革命的力量》</el-button> -->
                </div>
                <div class="forward" v-if="userInfo.id !=articleMes.userid">
                    <!-- <el-button type="text" icon="el-icon-share" @click="dialogTableVisible=true">转发</el-button> -->
                </div>
            </div>

            <ul class="comment">
                <li>
                    <span>评论</span>
                </li>
                <li>
                    <el-input type="textarea" :rows="2" maxlength="150" :show-word-limit="true" placeholder="请输入内容"
                        v-model="textarea"></el-input>
                </li>
                <li>
                    <el-button type="primary" size="small" @click="addGive">评论</el-button>
                </li>
            </ul>
            <div class="zongPL">
                <span>评论（{{commentTotal}}）</span>
            </div>
        </div>
        <Commentlist ref="commentlist" :articleMes='articleMes' @setComment='setComment'></Commentlist>
        <!-- 回复弹框 -->
        <el-dialog width="600px" title="转发文章" :visible.sync="dialogTableVisible">
            <div class="forward">
                <div class="forward_to">
                    <span>转发到：</span>
                    <span :class="forwardTo? 'tab active':'tab'" @click="forwardTo=true">我的空间</span>
                    <el-divider direction="vertical"></el-divider>
                    <span :class="!forwardTo? 'tab active':'tab'" @click="forwardTo=false">好友圈</span>
                </div>
                <div class="explain" v-if="!forwardTo">将微博定向转发到好友圈，只有你的好友可见这条微博</div>
                <div class="forward_article">{{articleMes.title}}</div>
                <Comment :data='articleMes' @closeTransmit='closeTransmit'></Comment>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {
        mapState
    } from "vuex";
    import Comment from "@c/comment/comment";
    import Commentlist from '@/components/comment/commentlist'
    import lastAndNextArticle from '@/views/pages/readingArticle/lastAndNextArticle'
    export default {
        props: ['articleMes'],
        components: {
            Comment,
            Commentlist,
            lastAndNextArticle
        },
        computed: {
            ...mapState({
                // 权限列表
                permissionArr: state => state.commonModule.permissionArr,
                // 用户详细信息
                userInfo: state => state.userModule.userInfo,
                // 分类列表
                articleClassificationList: state =>
                    state.articleModule.articleClassificationList,
                // 我的文章/草稿列表
                articleOrDraftList: state => state.articleModule.articleOrDraftList,
                // 打开文章或者帖子时暂存用
                articleOrPost: state => state.articleModule.articleOrPost
            })
        },
        created() {
            if(this.$route.query.article.urls){
                this.imgList = this.$route.query.article.urls.split(',')
            }
        },
        mounted() {
            // this.articleFriendContent(this.articleMes)
        },
        data() {
            return {
                commentTotal: 0,
                swiperOptionMultiple: {
                    loop: false,
                    autoplay: {
                        delay: 3000,
                        stopOnLastSlide: false,
                        disableOnInteraction: false,
                    },
                    slidesPerView: 3,
                    spaceBetween: 10,
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev'
                    },
                    on: {
                        tap: function (e) {
                        }
                    }
                },
                videoUrl:'',
                imgList: [],
                replysTextarea: '',
                activities: [{
                    content: '支持使用图标',
                    timestamp: '2018-04-12 20:46',
                    size: 'large',
                    type: 'primary',
                    icon: 'el-icon-more'
                }],
                activeComment: '1',
                textarea: "",
                dialogTableVisible: false,
                forwardTo: true,
                pageCommentL: {}
            };
        },
        methods: {
            setComment(params){
                this.commentTotal = params
            },
            back(){
                this.$router.go(-1);
                // this.$emit('closeDetails')
            },
            closeTransmit() {
                this.dialogTableVisible = false
            },
            // 新增评论
            addGive() {
                if (this.textarea != '') {
                    this.$store
                        .dispatch("commentModule/addGive", {
                            commentid: this.articleMes.id,
                            content: this.textarea,
                            type: this.$route.query.junmpType == 3 ? 6:2,
                            userid: this.userInfo.id,
                        })
                        .then(res => {
                            if (res.data.code == 200) {
                                this.$message.success('添加成功')
                                this.textarea = ''
                                this.$refs.commentlist.pageCommentlist()
                            }
                        });
                } else {
                    this.$message.warning('评论内容不能为空!')
                }
            },
            upArticle(parsams) {
            },
            nextArticle(parsams) {
            },
            // 分类类型转换
            articleTypeConvert(params) {
                var str = '全部分类'
                if (params) {
                    this.articleClassificationList.map(item => {
                        if (item.id == params) {
                            str = item.name
                            return str
                        }
                    })
                }
                return str
            },
            // 文章内容
            articleFriendContent(params) {
                this.$store
                    .dispatch("articleModule/articleFriendContent", {
                        id: params.id ? params.id : params.collectid,
                        userid: this.userInfo.id
                    })
                    .then(res => {
                        if (res.data.code == 200) {
                            this.articleMes = res.data.result
                            // document.getElementById(
                            //     "content"
                            // ).innerHTML = this.articleMes.content ? this.articleMes.content.slice(1, -1) : '';
                        }
                    });
            },
            errorHandler() {
                return true;
            }
        }
    };
</script>

<style lang="scss" scoped>
    .lineBanner {
        box-sizing: border-box;
        padding: 10px;

        .campusList {
            P {
                margin-block-start: 0;
                margin-block-end: 0;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                color: #303133;
                font-size: 14px;
            }

            label {
                color: #409EFF;
                font-size: 14px;
            }
        }
    }
    .readingArticles {
        width: 100%;
        min-height: 100vh;
        background-color: white;
        box-sizing: border-box;
        padding: 5px 0;

        .authorBox {
            text-align: left;
            font-size: 13px;
            color: #303133;
            box-sizing: border-box;
            padding: 8px;

            .classification {
                box-sizing: border-box;
                padding: 10px 0;
                list-style-type: none;
                margin-block-start: 0;
                margin-block-end: 0;
                padding-inline-start: 0;
                border-bottom: 1px solid #909399;

                li {
                    float: left;
                    margin-right: 20px;

                    .time {
                        margin-left: 10px;
                    }
                }

                li:last-of-type {
                    margin-right: 0;
                    float: right;
                }
            }

            .comment {
                box-sizing: border-box;
                padding: 10px 0;
                list-style-type: none;
                margin-block-start: 0;
                margin-block-end: 0;
                padding-inline-start: 0;

                li {
                    margin-top: 8px;
                }

                li:last-of-type {
                    text-align: right;
                }
            }

            .zongPL {
                box-sizing: border-box;
                padding: 10px 0;
                margin-bottom: 5px;
                border-bottom: 1px solid #909399;
            }

            .commentList {
                box-sizing: border-box;
                padding: 10px 0;
                list-style-type: none;
                margin-block-start: 0;
                margin-block-end: 0;
                padding-inline-start: 0;

                li {
                    border-bottom: 1px dashed #909399;
                    box-sizing: border-box;
                    padding-bottom: 10px;
                    margin-bottom: 15px;
                }

                .avatar,
                .commentDetail {
                    float: left;
                }

                .commentDetail {
                    margin-left: 10px;

                    .name {
                        display: inline-block;
                        cursor: pointer;
                        color: #409eff;
                        margin: 6px 0;
                    }

                    p {
                        margin-block-start: 0;
                        margin-block-end: 0;
                        margin-bottom: 6px;
                    }
                }

                .huifu {
                    float: right;
                }
            }

            .content {
                box-sizing: border-box;
                padding: 10px 20px;
                text-indent: 24px;
                text-align: justify;
                line-height: 28px;
                color: #303133;
                font-size: 14px;
            }

            .power {
                margin-top: 20px;
            }

            .upAndDown {
                .btn {
                    float: left;
                }

                .forward {
                    float: right;
                }
            }
        }

        .clearFix::after {
            content: "";
            display: block;
            width: 100%;
            font-size: 0;
            clear: both;
        }
    }

    .el-dropdown-link {
        cursor: pointer;
        color: #409eff;
    }

    .el-icon-arrow-down {
        font-size: 12px;
    }

    .demonstration {
        display: block;
        color: #8492a6;
        font-size: 14px;
        margin-bottom: 20px;
    }

    .forward {
        .forward_to {
            box-sizing: border-box;
            padding: 10px;
            text-align: left;

            .tab {
                box-sizing: border-box;
                padding-bottom: 4px;
                cursor: pointer;
            }

            .active {
                color: #409eff;
                border-bottom: 1px solid #409eff;
            }
        }

        .explain {
            box-sizing: border-box;
            padding: 5px;
            color: white;
            font-size: 14px;
            text-align: center;
            background-color: #409eff;
            margin: 8px 0;
            border-radius: 4px;
        }

        .forward_article {
            margin: 8px 0;
            box-sizing: border-box;
            padding: 5px 10px;
            border: 1px solid #909399;
            text-align: left;
            border-radius: 4px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
</style>